<template>
    <div id="answer">
        <shrink-bar></shrink-bar>
        <!--面包屑开始-->
        <div class="bread ww">
            <router-link to="/" tag="a"><i class="iconfont">&#xe6a2;</i>首页</router-link>
            <span class="iconfont">&#xe603;</span>
            <router-link to="/qa" tag="a">创业问答</router-link>
            <span class="iconfont">&#xe603;</span>
            <a href="javascript:void(0);">提问</a>
        </div>

        <!--顶部图片开始-->

        <div class="top_img">
            <a href="javascript:void(0);">
                <img src="./images/yu_top.jpg" alt="">
            </a>
        </div>


        <!--正文开始-->
        <main class="ww">
            <div class="m-left">
                <!--问题表单-->
                <div class="ml-pro">
                    <!--问题部分-->
                    <div class="question-box">
                        <div class="question-title clearfix">
                            <span class="fl">现在韩巴巴炸鸡店在上海可以加盟吗？</span>
                            <span class="fr">2019-1-12</span>
                        </div>
                        <p class="question-content">在上海可以加盟么，现在加盟有福利么。</p>
                        <a href="javascript:void(0);" class="letme">我来答</a>
                        <a href="javascript:void(0);" class="share"><i class="iconfont">&#xe648;</i>分享</a>
                    </div>

                    <el-form ref="answer" :model="answer" :rules="rulesAnswer">
                        <el-form-item label="" prop="msg">
                            <el-input type="textarea" v-model="answer.msg"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-checkbox v-model="answer.checked">匿名</el-checkbox>
                            <el-button type="danger" size="mini" @click="submitAnswer('answer')">提交回答</el-button>
                        </el-form-item>
                    </el-form>

                    <!--已提交回答部分-->
                    <div class="hot-problem refer">
                        <!--标题-->
                        <h2 class="hp-title"><i>100</i>个回答</h2>
                        <ul class="refer-nav">
                            <li>
                                <!--头像信息-->
                                <div class="ab-info clearfix">
                                    <a href="javascript:void(0);" class="abi-left">
                                        <img src="./images/head_img.png" alt="">
                                        <div>
                                            <p>y5n7q-游客</p>
                                            <p>2019-1-12</p>
                                        </div>
                                    </a>
                                    <a href="javascript:void(0);" class="abi-right">
                                        <i class="iconfont"></i>1
                                    </a>
                                </div>
                                <!--答案内容-->
                                <p class="answer-content">
                                    韩巴巴炸鸡店在上海可以加盟，现在加盟有很多福利。韩巴巴不仅选材上等，调料精品以外，口味多样满足不同
                                    地域不同顾客的口味需求。
                                </p>
                            </li>
                            <li>
                                <!--头像信息-->
                                <div class="ab-info clearfix">
                                    <a href="javascript:void(0);" class="abi-left">
                                        <img src="./images/head_img.png" alt="">
                                        <div>
                                            <p>y5n7q-游客</p>
                                            <p>2019-1-12</p>
                                        </div>
                                    </a>
                                    <a href="javascript:void(0);" class="abi-right">
                                        <i class="iconfont"></i>1
                                    </a>
                                </div>
                                <!--答案内容-->
                                <p class="answer-content">
                                    韩巴巴炸鸡店在上海可以加盟，现在加盟有很多福利。韩巴巴不仅选材上等，调料精品以外，口味多样满足不同
                                    地域不同顾客的口味需求。
                                </p>
                            </li>
                            <li>
                                <!--头像信息-->
                                <div class="ab-info clearfix">
                                    <a href="javascript:void(0);" class="abi-left">
                                        <img src="./images/head_img.png" alt="">
                                        <div>
                                            <p>y5n7q-游客</p>
                                            <p>2019-1-12</p>
                                        </div>
                                    </a>
                                    <a href="javascript:void(0);" class="abi-right">
                                        <i class="iconfont"></i>1
                                    </a>
                                </div>
                                <!--答案内容-->
                                <p class="answer-content">
                                    韩巴巴炸鸡店在上海可以加盟，现在加盟有很多福利。韩巴巴不仅选材上等，调料精品以外，口味多样满足不同
                                    地域不同顾客的口味需求。
                                </p>
                            </li>
                        </ul>
                    </div>


                    <!--热门问题-->
                    <div class="hot-problem ans">
                        <!--标题-->
                        <h2 class="hp-title">相似问题</h2>
                        <ul class="hp-nav">
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span>2019-1-10</span>
                                    <span>开家地锅鸡店的成本 开地锅鸡饭店赚钱吗？</span>
                                    <span><i>0</i>回答</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>


                <qa-form></qa-form>


            </div>

            <div class="m-right">
                <!--品牌推荐-->
                <div class="mr-recommend">
                    <div class="mrr-title">

                    </div>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re01.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re02.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re03.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <img src="./images/re04.png" alt="">
                                <div>
                                    <p>煲百味</p>
                                    <p>加盟费：<i>1-5万</i></p>
                                    <p>已有：1245人申请加盟</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <a href="javascript:void(0);" class="huan">
                        <img src="./images/huan.png" alt="">
                        <i>换一批</i>
                    </a>
                </div>
                <!--最新资讯-->
                <div class="mr-news">
                    <div class="mrn-title">

                    </div>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">创业加盟还是自营比较好，看过创业加盟还是自营比较好，看过...</a>
                        </li>
                    </ul>
                </div>
            </div>
        </main>

    </div>
</template>

<script>
    import shrinkBar from "@/components/tabBar/shrinkBar"
    import qaForm from "@/components/qaForm/qaForm"

    export default {
        name: "Answer",
        data() {
            // 验证答案非空
            const checkAnswer = (rule, value, callback) => {
                console.log(value)
                if (!value) {
                    return callback(new Error('请输入答案'));
                } else {
                    return callback()
                }
            };
            return {
                // 回答表单
                answer: {
                    msg: "",
                    checked: false
                },
                // 回答表单验证
                rulesAnswer: {
                    msg: [{validator: checkAnswer, trigger: 'blur'}],
                }
            }
        },
        methods: {
            submitAnswer(formName) {
                this.$refs[formName].validate((valid) => {
                    console.log(valid)
                    if (valid) {
                        alert('submit!');
                        this.answer.msg = ""
                    } else {
                        alert('error submit!!');
                        return false;
                    }
                });
                // console.log(this.answer)
            },
        },
        mounted() {

        },
        components: {
            shrinkBar,
            qaForm
        }
    }
</script>

<style lang="less">
    #answer {
        /* 面包屑导航 */

        .bread {
            margin-top: 19px;
            margin-bottom: 19px;

            a {
                font-size: 12px;
                color: #4f646a;

                &:nth-of-type(1) {
                    i {
                        font-size: 12px;
                        color: #4f646a;
                        margin-right: 4px;
                    }
                }

                &:hover {
                    color: #f32222;

                    i {
                        color: #f32222;
                    }
                }
            }

            span {
                color: #4f646a;
                font-size: 12px;
                margin-left: 3px;
                margin-right: 3px;
            }
        }

        /* 顶部图片开始 */

        .top_img {
            width: 1203px;
            height: 100px;
            margin: 0 auto 44px auto;

            a {
                width: 1203px;
                height: 100px;
                display: block;

                img {
                    width: 100%;
                    display: block;
                }
            }
        }

        /* 正文开始 */

        main {
            display: flex;
            justify-content: space-between;
            padding-bottom: 212px;

            .m-left {
                flex: 0 0 874px;
                /* 问题表单 */

                .ml-pro {
                    width: 100%;
                    background-color: #fff;
                    border: 1px solid #eaeaea;
                    padding: 10px 10px 27px 10px;


                    .question-box {
                        padding-left: 10px;

                        .question-title {
                            margin-bottom: 12px;

                            span {
                                &:nth-of-type(1) {
                                    color: #1e2629;
                                    font-size: 20px;
                                }

                                &:nth-of-type(2) {
                                    color: #4f646a;
                                    font-size: 16px;
                                    padding-right: 10px;
                                }
                            }
                        }

                        .question-content {
                            color: #4f646a;
                            font-size: 16px;
                            margin-bottom: 22px;
                        }

                        a {
                            &.letme {
                                display: inline-block;
                                width: 60px;
                                height: 24px;
                                background-color: #f13434;
                                border-radius: 5px;
                                color: #fff;
                                line-height: 24px;
                                font-size: 14px;
                                text-align: center;
                                margin-right: 26px;
                            }

                            &.share {
                                color: #8aa0a6;
                                font-size: 14px;

                                i {
                                    font-size: 12px;
                                    margin-right: 3px;
                                }
                            }
                        }
                    }

                    /* 回答表单 */

                    .el-form {
                        margin-top: 11px;
                        padding-left: 10px;

                        .el-textarea__inner {
                            width: 830px !important;
                            max-width: 830px !important;
                            min-width: 830px !important;
                            max-height: 107px !important;
                            min-height: 107px !important;
                        }

                        .el-button.el-button--danger.el-button--mini {
                            position: absolute;
                            right: 19px;
                            background-color: #f32222;
                        }

                        .el-checkbox {
                            position: absolute;
                            right: 80px;
                            top: -5px;

                            .el-checkbox__input.is-focus {
                                .el-checkbox__inner {
                                    border-color: #e8332f;
                                }
                            }

                            &.is-checked {
                                .el-checkbox__label {
                                    color: #e8332f;
                                }

                                .el-checkbox__inner {
                                    background-color: #e8332f;
                                    border-color: #e8332f;
                                }
                            }

                        }
                    }

                    /* 已经提交的回答 */

                    .refer {
                        border-bottom: none !important;

                        .refer-nav {
                            li {
                                margin-top: 20px;
                                margin-bottom: 20px;
                                padding-bottom: 20px;
                                border-bottom: 1px solid #c4d3d4;
                                /* 头像信息 */

                                .ab-info {
                                    width: 100%;
                                    height: 40px;
                                    //background-color: pink;

                                    .abi-left {
                                        display: flex;
                                        flex-direction: column;
                                        flex-flow: row wrap;
                                        width: 125px;
                                        height: 40px;
                                        float: left;

                                        img {
                                            width: 40px;
                                            height: 40px;
                                            flex: 0 0 40px;
                                            border-radius: 50%;
                                            margin-right: 8px;
                                        }

                                        div {
                                            p {
                                                flex: 1;
                                                font-size: 14px;
                                                color: #4f646a;
                                            }
                                        }
                                    }

                                    .abi-right {
                                        float: right;
                                        height: 40px;
                                        line-height: 40px;
                                        margin-right: 10px;
                                        font-size: 14px;
                                        color: #8aa0a6;

                                        i {
                                            margin-right: 16px;
                                        }
                                    }
                                }

                                /* 答案内容 */

                                .answer-content {
                                    font-size: 16px;
                                    color: #1e2629;
                                    padding-left: 42px;
                                    margin-top: 29px;
                                }
                            }
                        }

                    }

                    /* 热门问题 */

                    .hot-problem {
                        width: 831px;
                        border-top: 1px solid #c4d3d4;
                        border-bottom: 1px solid #c4d3d4;
                        margin-top: 69px;
                        position: relative;
                        padding-top: 35px;
                        padding-left: 23px;

                        .hp-title {
                            position: absolute;
                            width: 89px;
                            height: 20px;
                            font-size: 18px;
                            line-height: 20px;
                            color: #4f646a;
                            top: -11px;
                            z-index: 123;
                            left: 0;
                            background-color: #fff;
                        }

                        .hp-nav {
                            li {
                                margin-bottom: 17px;

                                a {
                                    font-size: 14px;
                                    color: #4f646a;

                                    span {
                                        font-size: 14px;

                                        &:nth-of-type(1) {
                                            margin-right: 32px;
                                        }

                                        &:nth-of-type(2) {

                                        }

                                        &:nth-of-type(3) {
                                            float: right;

                                            i {
                                                font-style: normal;
                                            }
                                        }
                                    }

                                    &:hover {
                                        span {
                                            &:nth-of-type(2) {
                                                color: #f51630;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }


                }

                /* 用户信息 */

                .ml-form {
                    width: 100%;
                    padding-bottom: 51px;
                    background-color: #fff;
                    border: 1px solid #ff0101;
                    margin-top: 33px;
                    position: relative;
                    /* 顶部图片 */

                    .service {
                        a {
                            display: block;
                            width: 100%;
                            height: 100%;

                            img {
                                display: block;
                                width: 100%;
                            }
                        }
                    }

                    /*  */

                    h2 {
                        padding-top: 34px;
                        padding-left: 43px;
                        font-size: 16px;
                        color: #1e2629;

                        i {
                            font-style: normal;
                            font-size: 12px;
                        }
                    }

                    form {
                        padding-left: 48px;
                        margin-top: 19px;

                        label {
                            font-size: 14px;

                            i {
                                color: #f51530;
                                margin-right: 3px;
                            }
                        }

                        input:not(.rad) {
                            padding-left: 5px;
                            width: 179px;
                            height: 30px;
                            font-family: PingFangSC-, sans-serif;
                            color: #333;

                            &:focus {

                            }
                        }

                        input[type="radio"] {
                            font-size: 14px;
                        }

                        #username {

                        }

                        .radiobox {
                            margin-top: 20px;
                            margin-bottom: 20px;

                            .rad {
                                vertical-align: middle;
                            }

                            #lady {
                                margin-left: 17px;
                            }
                        }

                        #usertel {

                        }

                        .address-box {
                            margin-top: 20px;
                            margin-bottom: 20px;

                            .useraddress-lab {
                                padding-left: 11px;
                            }
                        }

                        .usermsg-lab {
                            display: inline-block;
                            padding-left: 11px;
                            vertical-align: top;
                            padding-top: 5px;
                        }

                        #usermsg {
                            vertical-align: middle;
                            padding: 5px;
                            font-size: 14px;
                            font-family: PingFangSC-, sans-serif;
                            max-width: 179px;
                            min-width: 179px;
                            max-height: 230px;
                            min-height: 98px;
                        }

                        .own-information {
                            padding-left: 11px;
                            font-size: 14px;
                            margin-top: 20px;

                            #no {
                                margin-left: 21px;
                            }

                        }

                        #submit-btn {
                            text-align: center;
                            line-height: 30px;
                            color: #fff;
                            border: none;
                            width: 97px;
                            height: 30px;
                            background-color: #f13434;
                            border-radius: 5px;
                            margin-left: 75px;
                            margin-top: 20px;
                            cursor: pointer;
                            font-size: 15px;
                            outline: none;
                        }

                        /* 提示信息 */

                        .tips {
                            margin-top: 5px;
                            padding-left: 55px;
                            color: #f32222;

                            &.tipstel {
                                padding-left: 85px;
                            }
                        }

                        .spantip {
                            color: #f32222;
                            margin-left: 15px;
                        }
                    }

                    .quick-msg {
                        position: absolute;
                        width: 257px;
                        height: 253px;
                        //background-color: pink;
                        top: 176px;
                        right: 160px;
                        padding-left: 33px;
                        padding-top: 5px;
                        border-left: 1px solid #ddd;

                        p {
                            width: 100%;
                            border-bottom: 1px solid #ddd;
                            height: 30px;
                            font-size: 14px;
                        }

                        #quick-nav {
                            margin-top: 23px;

                            li {
                                font-size: 14px;
                                color: #1e2629;
                                line-height: 30px;
                                cursor: pointer;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;

                                &:hover {
                                    color: #ff0c0e;
                                }
                            }
                        }
                    }

                }
            }

            .m-right {
                flex: 0 0 306px;

                .mr-recommend {
                    width: 100%;
                    //height: 595px;
                    border-width: 2px 1px 1px 1px;
                    border-color: #f32222 #eaeaea #eaeaea #eaeaea;
                    border-style: solid;
                    background: #fff;
                    padding: 15px;

                    .mrr-title {
                        height: 33px;
                        margin-bottom: 15px;
                        background: url("./images/recommend_title_img.png") no-repeat center center;
                        background-size: contain;
                    }

                    ul {
                        width: 100%;
                        //background: pink;
                        border-top: 1px solid #eaeaea;

                        li {
                            height: 125px;

                            a {
                                display: flex;
                                width: 100%;
                                height: 100%;
                                border-bottom: 1px solid #eaeaea;
                                justify-content: space-between;

                                img {
                                    flex: 0 0 113px;
                                    height: 87px;
                                    display: block;
                                    margin-top: 21px;
                                    transition: transform .2s ease-in-out .1s;
                                }

                                > div {
                                    padding-top: 31px;

                                    p {
                                        &:nth-of-type(1) {
                                            font-size: 16px;
                                            transition: transform .2s ease-in-out .1s;
                                        }

                                        &:nth-of-type(2) {
                                            font-size: 14px;
                                            margin-top: 6px;
                                            margin-bottom: 6px;

                                            i {
                                                color: #ff722a;
                                                font-style: normal;
                                            }
                                        }

                                        &:nth-of-type(3) {
                                            font-size: 14px;
                                        }
                                    }
                                }
                            }

                            &:hover {
                                a {
                                    img {
                                        transform: translateX(-2px);
                                    }
                                }

                                p {
                                    &:nth-of-type(1) {
                                        color: #ff0b0f;
                                        transform: translateX(3px);
                                    }
                                }
                            }
                        }
                    }

                    .huan {
                        display: block;
                        color: #ff0b0f;
                        font-size: 12px;
                        margin-top: 15px;
                        text-align: center;

                        img {
                            width: 12px;
                            height: 12px;
                            display: inline-block;
                            vertical-align: middle;
                            -webkit-backface-visibility: hidden;
                        }

                        i {
                            font-style: normal;
                            margin-left: 4px;
                        }

                        .runanimation {
                            animation: run360 1.5s linear infinite;
                        }
                    }
                }

                @keyframes run360 {
                    from {
                        transform: rotate(0deg);
                    }
                    to {
                        transform: rotate(360deg);
                    }
                }

                .mr-news {
                    width: 100%;
                    border: 1px solid #eaeaea;
                    background: #fff;
                    margin-top: 21px;
                    padding: 7px 6px 28px 6px;

                    .mrn-title {
                        height: 68px;

                        background: url("./images/news_title.png") no-repeat center center;
                        background-size: contain;
                    }

                    ul {
                        padding-left: 18px;
                        padding-right: 18px;
                        margin-top: 18px;

                        li {
                            width: 260px;
                            font-size: 16px;
                            color: #4f646a;
                            overflow: hidden; /*超出部分隐藏*/
                            white-space: nowrap; /*不换行*/
                            text-overflow: ellipsis; /*超出部分文字以...显示*/
                            position: relative;
                            margin-bottom: 10px;

                            &:nth-child(-n+3) {
                                &:before {
                                    background-color: #f32222;
                                }
                            }

                            &::before {
                                content: '';
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                left: 0;
                                width: 7px;
                                height: 7px;
                                border-radius: 50%;
                                background-color: #4f646a;
                            }

                            a {
                                padding-left: 15px;

                                &:hover {
                                    color: #f32222;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
